<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">订单详情</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>
		
		<view class="main">
			<view class="goodsCont">
				<view class="names" v-if="pageType == 0">{{myOrderDetailsObj.buyName}}/{{myOrderDetailsObj.sellName}}</view>
				<view class="names" v-else>{{myOrderDetailsObj.metafile.platform}}</view>
				<view class="goodsBox">
					<view class="fileImg">
						<image :src="myOrderDetailsObj.fileUrl" mode="widthFix"></image>
						<text v-if="myOrderDetailsObj.orderType == 9 && pageType == 1">抢购</text>
						<text v-else-if="myOrderDetailsObj.orderType == 0 && pageType == 1">抢购</text>
						<text v-else-if="myOrderDetailsObj.orderType == 1 && pageType == 1">空投</text>
					</view>
					<view class="goodsName">
						<view class="collName">{{myOrderDetailsObj.collectionName}}</view>
						<text v-if="pageType == 0">产品ID：#{{myOrderDetailsObj.sortSn}}</text>
						<text v-else-if="myOrderDetailsObj.orderType !=9">产品ID：#{{myOrderDetailsObj.sortSn}}</text>
						<text v-else>{{isPrizeText(myOrderDetailsObj)}}</text>
					</view>
				</view>
			</view>
			
			<view class="orderBox">
				<view  v-if="pageType == 0">
					<view class="item">
						<view>挂单价格</view>
						<text>￥{{Number(myOrderDetailsObj.finalPrice).toFixed(2)}}</text>
					</view>
					<view class="item">
						<view>平台手续费<u-icon @tap="tipsShowFn(1)" class="iconf" name="question-circle" color="#666" size="26upx"></u-icon></view>
						<text>-￥{{myOrderDetailsObj.orderType == 1?Number(myOrderDetailsObj.buyMoney).toFixed(2):Number(myOrderDetailsObj.sellMoney).toFixed(2)}}</text>
					</view>
					<view class="item">
						<view>版权费<u-icon @tap="tipsShowFn(1)" class="iconf" name="question-circle" color="#666" size="26upx"></u-icon></view>
						<text>-￥{{myOrderDetailsObj.orderType == 1?Number(myOrderDetailsObj.buyCopyrightMoney).toFixed(2):Number(myOrderDetailsObj.sellCopyrightMoney).toFixed(2)}}</text>
					</view>
					<view class="item">
						<view>发行方服务费<u-icon @tap="tipsShowFn(1)" class="iconf" name="question-circle" color="#666" size="26upx"></u-icon></view>
						<text>-￥{{myOrderDetailsObj.orderType == 1?Number(myOrderDetailsObj.buyIssueMoney).toFixed(2):Number(myOrderDetailsObj.sellIssueMoney).toFixed(2)}}</text>
					</view>
				</view>
				
				<view class="item" v-if="pageType == 0">
					<!-- 订单类型 1受让2转让 -->
					<view>{{myOrderDetailsObj.orderType == 1?"实付金额":"实付到账金额"}}</view>
					<text class="price">￥{{myOrderDetailsObj.orderType == 1?Number(myOrderDetailsObj.payMoney).toFixed(2):myOrderDetailsObj.myMoneys}}</text>
				</view>
				<view class="item" v-else>
					<view>实付金额</view>
					<text class="price">￥{{Number(myOrderDetailsObj.payMoney).toFixed(2)}}</text>
				</view>
				
			</view>
			
			<view class="orderBox">
				<view class="item">
					<view>订单编号</view>
					<text>{{myOrderDetailsObj.orderNo}}</text>
				</view>
				<view class="item">
					<view>下单时间</view>
					<text>{{myOrderDetailsObj.payTime}}</text>
				</view>
				<view class="item" v-if="pageType != 0 && myOrderDetailsObj.orderType == 9 && myOrderDetailsObj.isPrize == 0 && myOrderDetailsObj.refundStatus == 1">
					<view>退款时间</view>
					<text>{{myOrderDetailsObj.refundTime}}</text>
				</view>
				<view class="item"  v-if="pageType != 0 && myOrderDetailsObj.orderType == 9 && myOrderDetailsObj.isPrize == 0 && myOrderDetailsObj.refundStatus == 1">
					<view>退款金额</view>
					<text class="price">￥{{Number(myOrderDetailsObj.refundMoney).toFixed(2)}}</text>
				</view>
			</view>
			
			<view class="tipsBox">
				<view class="content">数字产品为虚拟数字商品，而非实物，仅限实名认证为年满18周岁的中国大陆用户购买。数字产品的版权由发行方或品牌授权方拥有(所有)，除另行取得版权拥有者书面同意外，用户不得将数字产品用户任何商业用途。本商品一经售出，不支持退换。本商品源文件不支持本地下载。请勿对数字产品以任何其他非法方式进行使用。</view>
			</view>
			
		</view>
		<u-popup :show="tipsShow" :round="10" :customStyle="{width:'90%'}" mode="center">
			<view class="shop-tipsBox">
				<view class="tip-title">{{tipsTitle}}</view>
				<view class="tip-text">
					<view class="text" @tap="tipsShow = false">知道了</view>
				</view>
			</view>
		</u-popup>
		<mix-loading ref="min_loading"></mix-loading>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {nftresaleorders,getOrderDetail} from '@/api/home.js'
	export default {
		data(){
			return {
				tipsShow:false,
				tipsTitle:"",
				userAccount:{},
				myOrderDetailsObj:{
					payMoney:0,
					buyMoney:0,
					sellMoney:0,
					buyCopyrightMoney:0,
					sellCopyrightMoney:0,
					buyIssueMoney:0,
					sellIssueMoney:0,
				},
				pageType:0
			}
		},
		onLoad(option) {
			this.pageType = option.type;
			if(option.type == 0){
				this.getDetails(option.id);
			}else{
				this.getOrderDetails(option.id);
			}
		},
		methods:{
			isPrizeText(data){
				let str = "";
				if(data){
					if(data.isPrize == 0){
						if(data.refundStatus == 1){
							str = "未中签，已退款";
						}else{
							str = "未中签，待退款";
						}
					}else if(data.isPrize == 1){
						str = "已中签";
					}else if(data.isPrize == 2){
						str = "待抽签";
					}
				}
				return str;
			},
			tipsShowFn(i){
				if(i == 1){
					this.tipsTitle = "受让出售都将收起平台手续费！";
				}else if(i == 2){
					this.tipsTitle = "受让出售都将收起版权费！";
				}else if(i == 2){
					this.tipsTitle = "受让出售都将收起发行方服务费！";
				}
				this.tipsShow = true;
			},
			getOrderDetails(id){
				getOrderDetail({orderId:id}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						
						if(data.issuerName){
							data["issuerNameList"] = (data.issuerName).split(',');
							data["issuerNames"] = data["issuerNameList"][0];
						}
						
						if(data.metafile){
							data.metafile = JSON.parse(data.metafile);
						}
						if(data.fileUrl){
							data.fileUrl = this.pathImg + data.fileUrl;
						}
						data["payMoney"] = data.payTotal;
						data["payTime"] = data.payDate;
						this.myOrderDetailsObj = data;
					}
				});
			},
			getDetails(id){
				nftresaleorders({id}).then(res => {
					if (res.data.success) {
						let data = res.data.obj;
						
						if(data.fileUrl){
							data.fileUrl = this.pathImg + data.fileUrl;
						}
						
						
						data["myMoneys"] = data.payMoney - (data.sellMoney + data.sellCopyrightMoney + data.sellIssueMoney);
						data["myMoneys"] = Number(data.myMoneys).toFixed(2);
						
						this.myOrderDetailsObj = data;
					}
				});
			},
			back(){
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.con-box {
		min-height: 100vh;
		padding: 140upx 0upx 50upx;
		.shop-tipsBox{
			background-color: #fff;
			text-align: center;
			border-radius: 10upx;
			padding: 30upx 0;
			box-shadow: 0 0 6px 3px rgba(0,0,0,0.1);
			.tip-title{
				font-size: 26upx;
				padding: 0 20upx;
			}
			.tip-text{
				padding: 0 58upx;
				margin-top: 40upx;
				.text{
					background-color: #2c1769;
					color: #fff;
					font-size: 24upx;
					line-height: 50upx;
					height: 50upx;
					border-radius: 6upx;
				}
			}
		}
		.main{
			width: 100%;
			.tipsBox{
				padding:26upx 30upx;
				padding-top: 60upx;
				.content{
					text-align: justify;
					font-size: 24upx;
					color: #999;
				}
			}
			.orderBox{
				padding:38upx 30upx;
				color: #333;
				margin-bottom: 20upx;
				background-color: #fff;
				.item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 24upx;
					margin-bottom: 28upx;
					font-size: 24upx;
					padding-bottom: 40upx;
					margin-bottom: 40upx;
					border-bottom: 1px solid #F7F7F7;
					view{
						color: #666;
						display: flex;
						align-items: center;
						.iconf{margin-left: 10upx;}
					}
					text{
						color: #333;
					}
					.price{
						color: #EB5703;
						font-size: 30upx;
					}
				}
				>view:last-child{
					margin-bottom: 0;
					border: 0 none;
					padding-bottom: 0;
				}
			}
			.goodsCont{
				background-color: #fff;
				margin-bottom: 20upx;
				.names{
					font-size: 30upx;
					color: #111;
					font-weight: 800;
					padding:0 30upx;
					padding-top: 30upx;
				}
				.goodsBox{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #333;
					padding: 30upx;
					.goodsName{
						flex: 1%;
						height: 160upx;
						padding-left: 18upx;
						display: flex;
						justify-content: flex-start;
						align-content: space-between;
						flex-wrap: wrap;
						font-size: 24upx;
						.collName{
							width: 100%;
							color: #111;
						}
						>text{
							display: inline-block;
							height: 32upx;
							padding: 0 10upx;
							background-color: #999;
							color: #fff;
							text-align: center;
							line-height: 32upx;
						}
					}
					.fileImg{
						width: 160upx;
						height: 160upx;
						border-radius: 16upx;
						display: flex;
						overflow: hidden;
						align-items: center;
						justify-content: center;
						position: relative;
						text{
							background-image: url(../../static/home/title2.png);
							background-size: 100% 100%;
							background-repeat: no-repeat;
							display: inline-block;
							width: 80%;
							height: 30upx;
							position: absolute;
							top: 0;
							left: 50%;
							transform: translateX(-50%);
							color: #fff;
							text-align: center;
							line-height: 30upx;
							font-size: 18upx;
						}
						image{
							width: 100%;
						}
					}
				}
			}
		}
		
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		
	}
</style>
